<template>
  <div class="topbar">
    <div class="top">
      <div class="left">
        <ul>
          <li style="width: 180px">
            <svg
              width="117"
              height="30"
              viewBox="0 0 117 30"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="game-icon"
              data-v-faef58a4=""
              style="margin-right: 15px"
            >
              <g clip-path="url(#clip0_476_4306)">
                <path
                  d="M20.4809 3.82597L23.1946 3.49074C23.2744 3.47478 23.3543 3.53863 23.3543 3.61845L25.1102 24.227C25.1102 24.3068 25.0464 24.3866 24.9665 24.3866H23.0031C22.9233 24.3866 22.8594 24.3228 22.8434 24.243L20.3532 4.00157C20.3372 3.90579 20.4011 3.84194 20.4809 3.82597Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M16.7773 14.7285L19.8104 14.3613C19.8902 14.3454 19.97 14.4092 19.9859 14.4891L21.3109 25.2802C21.3269 25.36 21.263 25.4239 21.1832 25.4398L18.9324 25.7112C18.8685 25.7272 18.8047 25.6793 18.7887 25.5995L16.6337 14.9041C16.6337 14.8243 16.6975 14.7445 16.7773 14.7285Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M26.2276 14.5693H29.2128C29.2926 14.5693 29.3564 14.6332 29.3564 14.713V25.6159C29.3564 25.6957 29.2926 25.7596 29.2128 25.7596H27.0418C26.9619 25.7596 26.8981 25.6957 26.8981 25.6159L26.068 14.729C26.068 14.6332 26.1478 14.5693 26.2276 14.5693Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M15.8036 9.23729L17.0966 9.07766C17.1764 9.06169 17.2562 9.12555 17.2562 9.20536L17.783 13.1004C17.799 13.1802 17.7351 13.26 17.6553 13.26L16.6336 13.3877C16.5538 13.4037 16.49 13.3398 16.474 13.276L15.6918 9.39692C15.6758 9.31711 15.7397 9.23729 15.8036 9.23729Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M17.8309 9.12542L18.3098 13.0205C18.3258 13.1003 18.3896 13.1482 18.4695 13.1482L19.6667 13.0045C19.7465 12.9885 19.7944 12.9247 19.7944 12.8449L19.3155 8.93386C19.2996 8.85404 19.2357 8.80615 19.1559 8.80615L17.9586 8.94982C17.8788 8.98175 17.8309 9.0456 17.8309 9.12542Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M25.653 9.15734L25.9563 13.1003C25.9563 13.1641 26.0201 13.228 26.084 13.228H27.1375C27.2174 13.228 27.2812 13.1641 27.2812 13.0843L27.2014 9.15734C27.2014 9.07753 27.1375 9.01367 27.0577 9.01367H25.7966C25.7168 9.01367 25.653 9.07753 25.653 9.15734Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M27.7281 9.15734L27.808 13.0843C27.808 13.1641 27.8718 13.228 27.9516 13.228H29.0691C29.1489 13.228 29.2127 13.1641 29.2127 13.0843V9.15734C29.2127 9.07753 29.1489 9.01367 29.0691 9.01367H27.8559C27.792 9.01367 27.7281 9.07753 27.7281 9.15734Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M33.4589 26.9563C33.4589 27.0361 33.5228 27.1 33.6026 27.1159C39.1578 27.7545 43.0848 25.775 44.8567 24.6735C46.5967 23.604 48.9912 21.002 45.5431 19.0226C41.9354 16.9633 38.6629 16.7717 35.8694 17.0112C35.7736 17.0112 35.6938 16.9633 35.6778 16.8675C34.6402 9.09341 35.0074 2.1494 35.0712 0.872339C35.0712 0.77656 34.9754 0.712707 34.8956 0.744633C34.0975 1.03197 31.0165 2.1494 30.3621 2.38885C30.2982 2.42077 30.2503 2.48463 30.2663 2.56444C30.5057 3.8415 32.5331 14.6486 33.4589 26.9563ZM42.3345 21.6246C40.6105 23.2847 38.5831 24.3064 38.3916 24.4022C38.2958 24.4501 38.2 24.3862 38.184 24.3064C38.1042 23.9392 37.785 21.6725 37.6094 19.9484C37.5934 19.8686 37.6732 19.7728 37.769 19.7888C40.3391 20.2517 42.2068 21.3372 42.2706 21.3692C42.3983 21.449 42.3984 21.5607 42.3345 21.6246Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M3.19306 26.9552C3.19306 27.035 3.25691 27.0989 3.33673 27.1148C8.89194 27.7534 12.8189 25.7739 14.5908 24.6725C16.3308 23.6029 18.7253 21.0009 15.2772 19.0215C11.6536 16.9462 8.38111 16.7706 5.60351 17.0101C5.50773 17.0101 5.42791 16.9622 5.41195 16.8664C4.3903 9.07636 4.74149 2.10042 4.80535 0.807398C4.80535 0.711618 4.70957 0.647765 4.62975 0.679692C3.83159 0.96703 0.750681 2.08446 0.0961879 2.32391C0.0323349 2.33987 -0.0155549 2.41969 0.000408367 2.48354C0.25582 3.77656 2.26719 14.6475 3.19306 26.9552ZM12.0686 21.6235C10.3446 23.2837 8.31726 24.3053 8.1257 24.4011C8.02992 24.449 7.93414 24.3851 7.91818 24.3053C7.83836 23.9382 7.5191 21.6714 7.3435 19.9473C7.32754 19.8675 7.40736 19.7717 7.50314 19.7877C10.0732 20.2506 11.9409 21.3361 12.0048 21.3681C12.1325 21.4479 12.1325 21.5596 12.0686 21.6235Z"
                  fill="currentcolor"
                ></path>
                <path
                  d="M50.8111 3.82597L53.5248 3.49074C53.6046 3.47478 53.6845 3.53863 53.6845 3.61845L55.4404 24.227C55.4404 24.3068 55.3766 24.3866 55.2968 24.3866H53.3333C53.2535 24.3866 53.1896 24.3228 53.1736 24.243L50.6834 4.00157C50.6674 3.90579 50.7313 3.84194 50.8111 3.82597Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M47.1075 14.7285L50.1406 14.3613C50.2204 14.3454 50.3002 14.4092 50.3162 14.4891L51.6411 25.2802C51.6571 25.36 51.5932 25.4239 51.5134 25.4398L49.2626 25.7112C49.1987 25.7272 49.1349 25.6793 49.1189 25.5995L46.9639 14.9041C46.9639 14.8243 47.0277 14.7445 47.1075 14.7285Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M56.5578 14.5693H59.543C59.6228 14.5693 59.6866 14.6332 59.6866 14.713V25.6159C59.6866 25.6957 59.6228 25.7596 59.543 25.7596H57.372C57.2921 25.7596 57.2283 25.6957 57.2283 25.6159L56.3982 14.729C56.3982 14.6332 56.462 14.5693 56.5578 14.5693Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M46.1338 9.23729L47.4268 9.07766C47.5066 9.06169 47.5864 9.12555 47.5864 9.20536L48.1132 13.1004C48.1292 13.1802 48.0653 13.26 47.9855 13.26L46.9638 13.3877C46.884 13.4037 46.8202 13.3398 46.8042 13.276L46.022 9.39692C46.006 9.31711 46.0699 9.23729 46.1338 9.23729Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M48.1612 9.12542L48.6401 13.0205C48.656 13.1003 48.7199 13.1482 48.7997 13.1482L49.9969 13.0045C50.0767 12.9885 50.1246 12.9247 50.1246 12.8449L49.6457 8.93386C49.6298 8.85404 49.5659 8.80615 49.4861 8.80615L48.2889 8.94982C48.209 8.98175 48.1452 9.0456 48.1612 9.12542Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M55.9832 9.15734L56.2865 13.1003C56.2865 13.1641 56.3503 13.228 56.4142 13.228H57.4677C57.5475 13.228 57.6114 13.1641 57.6114 13.0843L57.5316 9.15734C57.5316 9.07753 57.4677 9.01367 57.3879 9.01367H56.1268C56.047 9.01367 55.9832 9.07753 55.9832 9.15734Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M58.0583 9.15734L58.1382 13.0843C58.1382 13.1641 58.202 13.228 58.2818 13.228H59.3993C59.4791 13.228 59.5429 13.1641 59.5429 13.0843V9.15734C59.5429 9.07753 59.4791 9.01367 59.3993 9.01367H58.1861C58.1222 9.01367 58.0583 9.07753 58.0583 9.15734Z"
                  fill="currentcolor"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M68.9293 2.4209H113.563C115.031 2.4209 116.213 3.55429 116.197 4.94309V25.0887C116.197 26.4775 115.015 27.6109 113.563 27.6109H68.9293C67.4767 27.6109 66.2954 26.4775 66.2954 25.0887V4.94309C66.2954 3.55429 67.4767 2.4209 68.9293 2.4209ZM104.662 19.2012H103.033V17.6879H104.662V19.2012ZM104.662 16.3661H103.033V15.1593H104.662V16.3661ZM104.662 11.5388H103.033V9.98719H104.662V11.5388ZM96.8651 9.98719H98.1869V11.5388H96.8651V9.98719ZM92.9382 20.4846H98.1869V21.9405C98.1869 22.2087 98.0528 22.3428 97.7846 22.3428H96.6353L97.4015 23.7028H101.846C102.178 23.7028 102.459 23.5879 102.689 23.358C102.918 23.1154 103.033 22.8344 103.033 22.5152V20.4846H109.087V17.6879H109.489L110.064 16.3661H109.087V13.8758H103.033V12.8414H109.087V8.66544H103.033V7.57355H109.853V6.29011H103.033V5.294H98.1869V6.29011H91.7888V7.57355H98.1869V8.66544H92.4593V12.8414H98.1869V13.8758H92.9382V15.1593H98.1869V16.3661H91.7505V17.6879H98.1869V19.2012H92.9382V20.4846ZM84.7203 23.7028H90.3713L86.2336 20.772H89.5093V17.1898H90.6395L88.9154 14.7953H90.218L90.9843 13.5119H87.5171V12.7456H89.2794L90.0456 11.4622H87.5171V10.696H89.7775L90.5437 9.45083H87.5171V8.857H90.6012V6.27095H84.318V5.31315H79.28V6.27095H72.9969V8.857H76.081V9.45083H73.2459V10.696H76.081V11.4622H73.744V12.7456H76.081V13.5119H72.8053V14.7953H74.6826L72.9586 17.1898H74.0888V20.772H77.3453L73.2268 23.7028H79.0693L81.8661 21.8255L84.7203 23.7028ZM77.5368 7.53524H86.0612V8.45472H83.3411V9.45083H80.257V8.45472H77.5368V7.53524ZM78.0732 17.209H85.5248V20.2739L84.2797 19.3927V17.6112H79.2992V19.3927L78.0732 20.2739V17.209ZM78.0349 15.8872L78.8586 14.7953H84.7586L85.5057 15.8872H78.0349ZM83.3411 11.4622H80.257V10.696H83.3411V11.4622ZM83.3411 13.5119H80.257V12.7456H83.3411V13.5119Z"
                  fill="currentcolor"
                ></path>
              </g>
              <defs>
                <clipPath id="clip0_476_4306">
                  <rect
                    width="116.212"
                    height="28.67"
                    fill="currentcolor"
                    transform="translate(0 0.665039)"
                  ></rect>
                </clipPath>
              </defs>
            </svg>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              data-v-faef58a4=""
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M3.73252 2.67143C3.33229 2.28533 3.33229 1.64422 3.73252 1.25812C4.11291 0.891172 4.71552 0.891172 5.09591 1.25812L7.21723 3.30452C7.27749 3.36266 7.32869 3.42659 7.37081 3.49455H10.5789C10.6211 3.42659 10.6723 3.36266 10.7325 3.30452L12.8538 1.25812C13.2342 0.891172 13.8368 0.891172 14.2172 1.25812C14.6175 1.64422 14.6175 2.28533 14.2172 2.67143L13.364 3.49455H14C16.2091 3.49455 18 5.28541 18 7.49455V13.0001C18 15.2092 16.2091 17.0001 14 17.0001H4C1.79086 17.0001 0 15.2092 0 13.0001V7.49455C0 5.28541 1.79086 3.49455 4 3.49455H4.58579L3.73252 2.67143ZM4 5.42392C2.89543 5.42392 2 6.31935 2 7.42391V13.0707C2 14.1753 2.89543 15.0707 4 15.0707H14C15.1046 15.0707 16 14.1753 16 13.0707V7.42392C16 6.31935 15.1046 5.42392 14 5.42392H4ZM5 9.31796C5 8.76568 5.44772 8.31796 6 8.31796C6.55228 8.31796 7 8.76568 7 9.31796V10.212C7 10.7643 6.55228 11.212 6 11.212C5.44772 11.212 5 10.7643 5 10.212V9.31796ZM12 8.31796C11.4477 8.31796 11 8.76568 11 9.31796V10.212C11 10.7643 11.4477 11.212 12 11.212C12.5523 11.212 13 10.7643 13 10.212V9.31796C13 8.76568 12.5523 8.31796 12 8.31796Z"
                fill="currentcolor"
              ></path>
            </svg>
            <span
              ><a
                href="https://www.bilibili.com"
                target="_black"
                class="tv-icon"
              ></a
              >主站</span
            >
          </li>
          <li>赛事中心</li>
          <li>
            <a href="#">英雄联盟</a>
            <ul>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022全球总决赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022LPL夏季赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022MSI </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022LPL春季赛 </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">王者荣耀</a>
            <ul>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022王者荣耀挑战者杯 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022KPL夏季赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022KPL春季赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2021KPL秋季赛 </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">DOTA2 </a>
            <ul>
              <li>
                <span class="over">已结束</span>
                <a href="#"> TI11国际邀请赛</a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> TI11西欧预选赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> TI11东南亚预选赛</a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> TI11北美预选赛 </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">第五人格</a>
            <ul>
              <li>
                <span class="over">进行中</span>
                <a href="#"> 2022IVL秋季赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022IVS群星挑战赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022IVL夏季赛</a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 深渊的呼唤V </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">CSGO</a>
            <ul>
              <li>
                <span class="over">进行中</span>
                <a href="#"> IEM里约Major </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022 BLAST秋季复活赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> EPL S16 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#">2022 BLAST秋季小组赛</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">守望先锋</a>
            <ul>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2022守望先锋联赛 </a>
              </li>
              <li>
                <span class="over">已结束</span>
                <a href="#"> 2021 守望先锋联赛 </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#"
              >更多赛事
              <svg
                width="11"
                height="6"
                viewBox="0 0 11 6"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="right-icon"
                data-v-faef58a4=""
                data-v-5784ed69-s=""
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M1.15346 0.673138C1.29199 0.534607 1.51659 0.534607 1.65512 0.673138L5.66105 4.67906L9.66697 0.673138C9.8055 0.534607 10.0301 0.534607 10.1686 0.673138C10.3072 0.811668 10.3072 1.03627 10.1686 1.1748L6.0791 5.26434C5.84822 5.49522 5.47388 5.49522 5.24299 5.26434L1.15346 1.1748C1.01493 1.03627 1.01493 0.811668 1.15346 0.673138Z"
                  stroke="currentcolor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
              </svg>
            </a>
            <ul>
              <li>
                <a href="#"> 绝地求生 </a>
              </li>
              <li>
                <a href="#"> 和平精英 </a>
              </li>
              <li>
                <a href="#"> 综合赛事 </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="search-input" data-v-faef58a4="">
          <input type="text" placeholder="全站搜索" data-v-faef58a4="" /><svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="search-icon"
            data-v-faef58a4=""
            style="margin-left: -23px"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M15.8451 14.7003C16.1377 14.9915 15.9752 15.272 15.6934 15.5632C15.65 15.6279 15.5958 15.6818 15.5525 15.7249C15.2707 15.973 14.9456 16.124 14.6854 15.8652L11.1848 12.3815C9.97093 13.3198 8.47529 13.8267 6.94714 13.8267C3.12134 13.8267 0 10.7314 0 6.91337C0 3.10616 3.1105 0 6.94714 0C10.7729 0 13.8943 3.09538 13.8943 6.91337C13.8943 8.48802 13.3524 10.0087 12.3661 11.2383L15.8451 14.7003ZM1.63647 6.9026C1.63647 9.81463 4.02083 12.1766 6.93624 12.1766C9.85165 12.1766 12.236 9.81463 12.236 6.9026C12.236 3.99058 9.85165 1.6286 6.93624 1.6286C4.00999 1.6286 1.63647 4.00136 1.63647 6.9026Z"
              fill="#18191C"
            ></path>
          </svg>
        </div>
        <div class="user" data-v-faef58a4="">
          <img
            src="./images/ZpMz2PzyoJ.png@114w_114h_1c.webp"
            loading="lazy"
            class="face"
            data-v-faef58a4=""
          />
          <div class="user-popper" data-v-faef58a4="" style="display: none">
            <div class="user-options" data-v-faef58a4="">
              <div class="user-name" data-v-faef58a4=""></div>
              <div class="line" data-v-faef58a4=""></div>
              <div class="logout option-item" data-v-faef58a4="">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  data-v-faef58a4=""
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M19.6139 10.3011C19.6934 10.1083 19.6934 9.89274 19.6139 9.69996C19.5745 9.60385 19.5167 9.51719 19.4445 9.44496L17.2223 7.22274C16.915 6.91552 16.4178 6.91607 16.1111 7.22274C15.8045 7.52941 15.8039 8.02663 16.1111 8.33385L16.9923 9.21496L10 9.21496C9.56614 9.21441 9.21448 9.56607 9.21448 10.0005C9.21447 10.2172 9.30225 10.4139 9.44448 10.5561C9.5867 10.6983 9.78336 10.7861 10 10.7861L16.9923 10.7861L16.1111 11.6672C15.8045 11.9739 15.8039 12.4711 16.1111 12.7783C16.4184 13.0855 16.9156 13.085 17.2223 12.7783L19.4445 10.5561C19.5167 10.4839 19.5745 10.3972 19.6139 10.3011Z"
                    fill="currentcolor"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M13.8889 6.11111C11.7413 3.96349 8.25873 3.96349 6.11111 6.11111C3.96349 8.25873 3.96349 11.7413 6.11111 13.8889C8.25873 16.0365 11.7413 16.0365 13.8889 13.8889C14.1957 13.5821 14.6932 13.5821 15 13.8889C15.3068 14.1957 15.3068 14.6932 15 15C12.2387 17.7613 7.76127 17.7613 5 15C2.23873 12.2387 2.23873 7.76127 5 5C7.76127 2.23873 12.2387 2.23873 15 5C15.3068 5.30683 15.3068 5.80429 15 6.11111C14.6932 6.41794 14.1957 6.41794 13.8889 6.11111Z"
                    fill="currentcolor"
                  ></path></svg
                >退出登录
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="match">
      <div class="img1">
        <img
          src="../Navigation/images/7a2d5248ab44cca39e67aaae6c21fb0452653105.png@390w_135h_1c.webp"
          alt=""
        />
        <div class="active">
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
        </div>
      </div>
      <div class="img2">
        <img
          src="../Navigation/images/805a1a216510dda567acd81b4e5a6f51f3b7ed40.png@390w_135h_1c.webp"
          alt=""
        />
        <div class="active-menu">
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022全球总决赛</div>
          </div>
        </div>
      </div>
      <div class="tab">
        <div>DOTA2</div>
        <div class="tab-menu">
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
        </div>

        <div>第五人格</div>
        <div class="tab-menu">
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
        </div>

        <div>CSGO</div>
        <div class="tab-menu">
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
        </div>

        <div>守望先锋</div>
        <div class="tab-menu">
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
        </div>

        <div>绝地求生</div>
        <div class="tab-menu">
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
        </div>

        <div>更多专区</div>
        <div class="tab-menu">
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
          <div>
            <div>已结束</div>
            <div>2022守望先锋联赛</div>
          </div>
        </div>
      </div>
      <div class="icon">
        <div>
          <div>
            <svg
              width="18"
              height="22"
              viewBox="0 0 18 22"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              data-v-69fd406a=""
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M6.83325 0.416504C5.1764 0.416504 3.83325 1.75965 3.83325 3.4165V3.41661C2.50386 3.4181 1.80657 3.44062 1.29618 3.78165C1.0596 3.93973 0.856478 4.14286 0.698401 4.37944C0.333252 4.92592 0.333252 5.68667 0.333252 7.20817V17.4998C0.333252 19.5426 0.333252 20.564 0.967854 21.1986C1.60246 21.8332 2.62383 21.8332 4.66658 21.8332H13.3333C15.376 21.8332 16.3974 21.8332 17.032 21.1986C17.6666 20.564 17.6666 19.5426 17.6666 17.4998V7.20817C17.6666 5.68667 17.6666 4.92592 17.3014 4.37944C17.1434 4.14286 16.9402 3.93973 16.7037 3.78165C16.1933 3.44062 15.496 3.4181 14.1666 3.41661V3.4165C14.1666 1.75965 12.8234 0.416504 11.1666 0.416504H6.83325ZM6.91659 3.4165C6.91659 2.86422 7.3643 2.4165 7.91659 2.4165H10.0833C10.6355 2.4165 11.0833 2.86422 11.0833 3.4165C11.0833 3.96879 10.6355 4.4165 10.0833 4.4165H7.91659C7.3643 4.4165 6.91659 3.96879 6.91659 3.4165ZM5.74992 9.99984C5.19763 9.99984 4.74992 10.4476 4.74992 10.9998C4.74992 11.5521 5.19763 11.9998 5.74992 11.9998H12.2499C12.8022 11.9998 13.2499 11.5521 13.2499 10.9998C13.2499 10.4476 12.8022 9.99984 12.2499 9.99984H5.74992ZM5.74992 14.3332C5.19763 14.3332 4.74992 14.7809 4.74992 15.3332C4.74992 15.8855 5.19763 16.3332 5.74992 16.3332H10.0833C10.6355 16.3332 11.0833 15.8855 11.0833 15.3332C11.0833 14.7809 10.6355 14.3332 10.0833 14.3332H5.74992Z"
                fill="currentcolor"
              ></path>
            </svg>
          </div>
          <div>全部赛程</div>
        </div>
        <div>
          <div>
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              data-v-69fd406a=""
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M0.87868 0.87868C0 1.75736 0 3.17157 0 6V14C0 16.8284 0 18.2426 0.87868 19.1213C1.75736 20 3.17157 20 6 20H14C16.8284 20 18.2426 20 19.1213 19.1213C20 18.2426 20 16.8284 20 14V6C20 3.17157 20 1.75736 19.1213 0.87868C18.2426 0 16.8284 0 14 0H6C3.17157 0 1.75736 0 0.87868 0.87868ZM15.8321 7.5547C16.1384 7.09517 16.0142 6.4743 15.5547 6.16795C15.0952 5.8616 14.4743 5.98577 14.1679 6.4453L11.1238 11.0115L10.6651 10.094C9.97829 8.72052 8.06392 8.60134 7.2121 9.87907L4.16795 14.4453C3.8616 14.9048 3.98577 15.5257 4.4453 15.8321C4.90483 16.1384 5.5257 16.0142 5.83205 15.5547L8.8762 10.9885L9.33494 11.906C10.0217 13.2795 11.9361 13.3987 12.7879 12.1209L15.8321 7.5547Z"
                fill="currentcolor"
              ></path>
            </svg>
          </div>
          <div>赛事预测</div>
        </div>
        <div>
          <div>
            <svg
              width="17"
              height="21"
              viewBox="0 0 17 21"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              data-v-69fd406a=""
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M8.54175 5.37516V0.0834961H6.41675C3.47047 0.0834961 1.99733 0.0834961 1.08204 0.998787C0.166748 1.91408 0.166748 3.38722 0.166748 6.3335V14.6668C0.166748 17.6131 0.166748 19.0862 1.08204 20.0015C1.99733 20.9168 3.47047 20.9168 6.41675 20.9168H10.5834C13.5297 20.9168 15.0028 20.9168 15.9181 20.0015C16.8334 19.0862 16.8334 17.6131 16.8334 14.6668V8.37516H11.5417L11.4873 8.37517H11.4873H11.4873C11.0633 8.37525 10.6511 8.37533 10.3112 8.32963C9.92803 8.27811 9.49075 8.15259 9.12753 7.78938C8.76432 7.42616 8.6388 6.98888 8.58728 6.60568C8.54158 6.26577 8.54166 5.85364 8.54174 5.42957L8.54175 5.37516ZM10.5417 5.37516V0.0873593C10.994 0.0968227 11.2875 0.129468 11.5594 0.24208C11.9422 0.400665 12.2433 0.701738 12.8455 1.30388L15.613 4.07144L15.613 4.07145C16.2152 4.67359 16.5162 4.97466 16.6748 5.35752C16.7874 5.62939 16.8201 5.92291 16.8296 6.37516H11.5417C11.0421 6.37516 10.7679 6.37304 10.5777 6.34747L10.5704 6.34647L10.5694 6.33919C10.5439 6.14899 10.5417 5.87484 10.5417 5.37516ZM7.28931 10.6292L10.9315 12.419C11.8563 12.8735 11.8563 14.3768 10.9315 14.8313L7.28931 16.6211C6.38313 17.0665 5.37508 16.3043 5.37508 15.1738V12.0765C5.37508 10.9461 6.38313 10.1839 7.28931 10.6292Z"
                fill="currentcolor"
              ></path>
            </svg>
          </div>
          <div>视频库</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CNavigation",
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.topbar {
  width: 100%;

  .top {
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 270px;
    z-index: 999;
    color: #fff;
    margin: 0 20px;
  }
}

.left {
  width: 76%;
  ul {
    width: 100%;
    li {
      float: left;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      a {
        color: #fff;
      }
    }
  }
}

ul li ul li {
  display: none;
  color: black;
  // display: flex;
  // justify-content: space-around;
}
ul li ul li a {
  color: black !important;
}

ul li:hover ul li {
  display: block;
  width: 200px;
  font-size: 14px;
  background-color: #fff;
}
ul li:hover {
  background: transparent;
}
.right {
  position: relative;
  display: flex;
  align-items: center;
  width: 20%;
  height: 15%;
  img {
    width: 30px;
  }
}
.right .search-input input[data-v-faef58a4] {
  flex-grow: 1;
  border: none;
  outline: none;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  background-color: var(--graph_bg_regular);
}
.right .search-input {
  margin-right: 18px;
  display: flex;
  align-items: center;
  input {
    width: 178px;
    background: #ccc !important;
  }
}
.match {
  display: flex;
  width: 100%;
  height: 10%;
  padding: 31px;
  background-color: #f1f2f3;
  .img1 {
    background: linear-gradient(
        rgba(28, 128, 238, 0.5) 0%,
        rgb(28, 128, 238) 100%
      ),
      url("./images/d98392229d9b568a3cd667d38eb76922344e31c2.png@.webp");
    width: 15%;
    height: 80px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 106px;
      height: 44px;
      width: 60%;
      height: 60%;
      transition: all 0.6s; //设置动画执行的时间为0.6s
      cursor: pointer;
    }
    .active {
      position: absolute;
      bottom: 96px;
      width: 100%;
      height: 142px;
      background: #fff;
      padding: 14px;
      box-sizing: border-box;
      z-index: 9999999;
      display: none;
      border-radius: 5px;
      & > div {
        display: flex;

        & > div:first-child {
          border: 1px solid #ccc;
          margin-right: 15px;
          margin-bottom: 15px;
        }
      }
    }
    .active div > div {
      border-radius: 3px;
    }
  }
  img:hover {
    transform: scale(1.2);
  }
  .img1:hover .active {
    display: block;
  }
  .img2 {
    margin-left: 10px;
    margin-right: 10px;
    background: linear-gradient(
        rgba(177, 151, 84, 0.5) 0%,
        rgb(177, 151, 84) 100%
      ),
      url("./images/aa057bc4a093ee682fd951592499e2b5c40d168e.png@.webp");
    width: 15%;
    height: 80px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 60%;
      height: 60%;
      transition: all 0.6s; //设置动画执行的时间为0.6s
      cursor: pointer;
    }
    .active-menu {
      position: absolute;
      bottom: 140px;
      width: 15%;
      height: 142px;
      background: #fff;
      padding: 14px;
      box-sizing: border-box;
      z-index: 9999999;
      display: none;
      border-radius: 5px;
      & > div {
        display: flex;

        & > div:first-child {
          border: 1px solid #ccc;
          margin-right: 15px;
          margin-bottom: 15px;
        }
      }
    }
    img:hover {
      transform: scale(1.2);
    }
  }
  .img2:hover .active-menu {
    display: block;
  }
  .tab {
    width: 41%;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      width: 31%;
      height: 33px;
      background: #fff;
      margin-bottom: 13px;
      font-size: 13px;
      font-weight: 700;
      color: #61666d;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
    }
    .tab-menu {
      position: absolute;
      bottom: 128px;
      width: 15%;
      height: 142px;
      background: #fff;
      padding: 14px;
      box-sizing: border-box;
      z-index: 9999999;
      display: none;
      border-radius: 5px;
      & > div {
        display: flex;

        & > div:first-child {
          border: 1px solid #ccc;
          margin-right: 15px;
          margin-bottom: 15px;
        }
      }
    }
  }
  .tab > div:hover {
    background-color: #f1f2f3;
  }
  .icon {
    width: 21%;
    height: 80px;
    margin-left: 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: all 0.6s; //设置动画执行的时间为0.6s
    cursor: pointer;
    & > div {
      width: 18%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      // height: 20px;
      & > div:first-child {
        width: 110%;
        background: #fff;
        height: 50px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
      }
    }
  }
  .icon div > svg:hover {
    transform: scale(1.5);
  }
}
</style>
